<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../day8/jquery-3.4.1.min.js"></script>
		<script>
		//有问题，后加的元素没有moseover事件
			$(function(){
				$("#d7 li").bind({
					"mouseover":function(){
						$(this).css({"font-size":"60px"})
					},
					"mouseout":function(){
						$(this).css({"font-size":"15px"})
					}
				});
				$("#addF").click(function(){
					let n=window.prompt("请说人话：");
					let li=$("<li></li>");
					li.append(n);//append("<li>"+n+"</li>")
					$("#d7 ul").prepend(li);//$("#d7 ul").after(li);
				});
			});
		</script>
	</head>
	<body>
	<div id="d7">
		<ul type="square">
			<li>apple</li>
			<li>banana</li>
			<li>grape</li>
			<li>pear</li>
			<li>water-melon</li>
		</ul>
		
		<div id="d3">
			<button type="button" id="addF">添加水果</button>
		</div>
	</div>
	</body>
</html>
